<template>
  <div class="rankPart" @click="goList">
    <div class="album">
      <div class="cover-bg"></div>
      <div class="cover"  :style="{backgroundImage:'url('+'https://static.missevan.com/coversmini/'+rank.album.cover_image+')'}">
        <div class="sound-num">
          <span>{{rank.album.music_count}}</span>
        </div>
      </div>
    </div>
    <div class="rank-list">
      <span class="rank-item"
        v-for="(item,index) in rank.sounds"
        :key="item.id"
      >{{index+1}}{{item.soundstr}}</span>
      
    </div>
  </div>
</template>

<script>
export default {
  props:['rank'],
  methods:{
    goList(){
      this.$router.push({
        name:"album",
        params:{
          id:this.rank.album.id
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.rankPart
    display flex
    height 1.3rem
    width 100%
    padding .1rem
    justify-content space-around
    align-items center
    position relative
    &:after
      content ""
      display block
      width  90%
      position absolute
      bottom 0
      border-bottom 1px solid #e0e0e0
    &:last-child:after
      border-color transparent
    .album
      width 1.12rem
      margin 0.05rem 0.03rem
      position relative
      .cover-bg
        position absolute
        width 100%
        padding-bottom 100%
        background url('https://static.missevan.com/assets/m/images/build/album-cover.efe70663.png') no-repeat
        background-size contain
        z-index -1
      .cover
        width 1rem
        height 1rem
        overflow visible
        background-color #e0e0e0
        background-size 100%
        background-position 50%
        border-radius 0.04rem
        background-repeat no-repeat 
        display flex
        align-items flex-end
        .sound-num
          width 100%
          display flex
          align-items center
          justify-content flex-end
          height .18rem
          border-radius 0 0 0.04rem 0.04rem
          background linear-gradient(180deg,transparent,rgba(0,0,0,.26))
          >span
            display flex
            align-items center
            margin-right .05rem
            color #fff
            font-size .12rem
            &:before
              content ""
              display block
              width .13rem
              height .11rem
              background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons-thumbnails@2x.8e0a6b22.png')
              background-position 0 -0.44rem
              background-size .56rem .55rem
              margin-right 0.02rem
    .rank-list
      display flex
      flex-direction column
      justify-content space-around
      height 100%
      width 60%
      .rank-item
        width 100%
        height .16rem
        text-overflow ellipsis 
        overflow hidden
        font-size .13rem
        color #9e9e9e
</style>